<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/31
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>list</title>
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div>欢迎：${loginUser.realName}</div>
<div>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">真实姓名：</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="realName" id="realName" autocomplete="off">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">角色：</label>
                <div class="layui-input-block">
                    <select name="roleId" lay-filter="aihao">
                        <option value="">全部</option>
                        <option value="1">管理系统员</option>
                        <option value="2">店长</option>
                        <option value="3">店员</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                </div>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <div id="find"></div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="show">展示</a>
</script>

<script src="${pageContext.request.contextPath}/statics/layui/layui/layui.js" charset="utf-8"></script>

<script type="text/html" id="sex">
    {{d.sex==1 ? '女': '男'}}
</script>

<script>
    layui.use(['table','form','jquery'], function(){
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        // 工具栏事件

        var tableIns = table.render({
            elem: '#test'
            ,url: '${pageContext.request.contextPath}/user/list'
            ,toolbar: '#toolbarDemo'
            ,cols: [[
                {field:'id', width:80, title: '编号', sort: false}
                ,{field:'account', width:100, title: '账号'}
                ,{field:'realName', width:100, title: '真实姓名', sort: false}
                ,{field:'roleName', width:100, title: '角色'}
                ,{field:'sex', title: '性别',templet:"#sex",width:100, minWidth: 80}
                ,{field:'age', width:100, title: '年龄', sort: false}
                ,{field:'phone', width:120, title: '电话', sort: false}
                ,{field:'phone', width:180, title: '电话'}
                ,{field: 'idpicpath', title:'图片',width: 100,sort:false}
                ,{fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}

            ]]
            ,page: true
        });
        // 工具栏事件
        table.on('toolbar(test)', function(obj){
            switch(obj.event){
                case 'add':
                    window.open('toadd')
                    break;
            };
        });
        //触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'view'){
                window.open('view/'+data.id)
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                $.get('delete/'+data.id,function (data) {
                    layer.close(index);
                    if (data=="1"){
                        layer.confirm('删除成功')
                        location.reload();
                    }else{
                        alert("删除失败")
                    }
                })
                });
            } else if(obj.event === 'edit'){
                window.open('toupdate/'+data.id)
                // layer.open({
                //   title: '编辑',
                //   type: 1,
                //   area: ['80%','80%'],
                //   content: '<div style="padding: 16px;">自定义表单元素</div>'
                // });
            }else if (obj.event === 'show'){
                $.ajax({
                    type : "get",
                    url : "find?id="+data.id,
                    data : "",
                    dataType : "json",
                    async : true,
                    success : function(jsonData) {
                        $("#find").empty()
                        var img="http://localhost:8080${pageContext.request.contextPath}/statics/upload/"+jsonData.idpicpath
                        $("#find").append(
                            "<div>账号："+jsonData.account+"<button class='layui-icon layui-icon-export' id='withExport'>取消展示</button>"+"</div>"
                            +"<div>真实姓名："+jsonData.realName+"</div>"
                            +"<div>性别："+(jsonData.sex==1?"女":"男")+"</div>"
                            +"<div>出生日期:"+jsonData.birthday+"</div>"
                            +"<div>电话："+jsonData.phone+"</div>"
                            +"<div>地址："+jsonData.address+"</div>"
                            +"<div>角色："+jsonData.roleId+"</div>"
                            +"<div id='idpi'>证件照：</div>"
                        )
                        $("#idpi").append("<img src='"+img+"'/>")

                    }
                });
     }
            $(document).on('click',"#withExport",function(){
                $("#find").empty()
            });
        });
        //监听提交
        form.on('submit(demo1)', function(data){
            console.log(data.field)
            //这里以搜索为例
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    realName: data.field.realName
                    ,roleId: data.field.roleId
                    //…
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });


    });
</script>
</body>
</html>
